import {Image, View} from '@tarojs/components'
import {observer} from 'mobx-react'
import {useContext, useEffect, useState} from 'react'
import Taro, {useDidHide, useDidShow, useRouter} from '@tarojs/taro'
import MyNav from '@/components/nav'
import {
  ParamAnaLyseCard,
  ParamInfoCard,
  AbnormalRatioCard,
  HistoryRecordCard
} from './components'
import {imagesUrl} from '@/utils/baseUrl'
import './index.scss'
import {SingleparaminfoStore} from './model'
import {uSelectMyDevListByUserId} from '@/api'
import appStore from '@/store/app'
const Singleparaminfo: React.FC = (): JSX.Element => {
  let router = useRouter()

  const {handleTimeRangeChange, getTimeRange, updatePageQuery, pageQuery} =
    useContext(SingleparaminfoStore)
  const {userInfo} = useContext(appStore)
  const [simpleDevInfo, setSimpleDevInfo] = useState<
    SimpleDeviceData | undefined
  >(undefined)

  function updateSimpleDevInfo() {
    uSelectMyDevListByUserId({userId: userInfo.userId})
      .then(res => {
        if (pageQuery.devId) {
          let currentDev = res.data.find(
            item => item.devId + '' === pageQuery.devId
          )
          if (currentDev) {
            setSimpleDevInfo(currentDev)
          }
        } else {
          setSimpleDevInfo(undefined)
        }
      })
      .catch(err => {
        setSimpleDevInfo(undefined)
      })
  }

  // 可以使用所有的 React Hooks
  useEffect(() => {
    console.log('Singleparaminfo useEffect')
    updateSimpleDevInfo()
  }, [userInfo])

  // 对应 onShow
  useDidShow(() => {
    console.log('Singleparaminfo useDidShow')
    updatePageQuery(router.params)
  })

  // 对应 onHide
  useDidHide(() => {
    console.log('Singleparaminfo useDidHide')
  })
  return (
    <View className="h-screen flex flex-col bg-xx_bg relative">
      <Image
        src={imagesUrl + 'bg-singleParamInfo.png'}
        className="w-full absolute top-0 left-0 z-10"
        style={{height: '45%'}}
      ></Image>
      <MyNav>水质详情数据</MyNav>
      {/* 参数当前数据 */}
      <View className="flex-1 overflow-hidden p-16 z-20 relative overflow-y-auto">
        {/* 单参数详情 */}
        <ParamInfoCard></ParamInfoCard>
        {/* 单参数分析 */}
        <ParamAnaLyseCard
          timeRangeChange={handleTimeRangeChange}
        ></ParamAnaLyseCard>
        {/* 单参数异常分布 */}
        <AbnormalRatioCard
          startTime={getTimeRange[0]}
          endTime={getTimeRange[1]}
        ></AbnormalRatioCard>
        {/* 参数历史记录 */}
        <HistoryRecordCard></HistoryRecordCard>
      </View>
    </View>
  )
}
export default observer(Singleparaminfo)
